<template>
  <div class="register">
    <van-nav-bar title="个人注册" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight"/>
    <van-field v-model="name" placeholder="以字母开头,由数字和字母组成" label="用户名" input-align='right'/>
    <van-field v-model="pwd" placeholder="6位以上15位以下密码" label="密码" input-align="right"/>
    <van-field v-model="dbpwd" placeholder="请再次输入密码" label="确认密码" input-align="right"/>
    <van-field v-model="email" placeholder="请输入邮箱" label="电子邮箱" input-align='right' style="margin-bottom:10px"/>

    <van-field readonly clickable label="国家/地区" :value="value" placeholder="请选择国家或地区" @click="showPicker = true" input-align='right' right-icon='arrow' />
    <van-popup v-model="showPicker" position="bottom">
    <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>

    <van-field v-model="zsxm" label="真实姓名" input-align='right' placeholder="请输入真实姓名"/>
    <van-field :value='data' label="证件类型" input-align='right' placeholder="请选择证件类型" right-icon='arrow'  id="zjlx" readonly/>
    <van-field v-model="ID_Number" label="身份证号" input-align='right' @blur="ID_check" placeholder="请输入证件号码"/>
    <!-- 性别 -->
    <van-field label="性别" right-icon='arrow' readonly v-model="sex" placeholder="请选择性别" input-align="right" @click="showSex = true"/>
    <van-popup v-model="showSex" position="bottom">
              <van-picker
          show-toolbar
          :columns="sex_columns"
          @cancel="showSex = false"
          @confirm="checkSex"
        />
    </van-popup>
    <!-- 生日 -->
    <van-field label="出生日期" input-align="right" placeholder='请选择出生日期' right-icon="arrow" readonly @click="showTime = true" v-model="time"/>
    <van-popup v-model="showTime" position="bottom">
            <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel='showTime=false'
        @confirm="checkTime"
      />
    </van-popup>
    <van-field v-model="tel" type="tel" label="手机" placeholder="请填写手机号" input-align="right"/>


    <!-- 服务区域 -->

  </div>
</template>

<script>
  export default {
    data() {
      return {
        name:'',
        pwd:'',
        dbpwd:'',
        email:'',
        showPicker: false,
        showSex:false,
        showTime:false,
        ID_Number:'',
        zsxm:'',
        value: '中国',
        data:'内地居民身份证',
        columns: ['中国', '中国香港', '中国澳门', '中国台湾', '日本'],
        sex:'',
        time:'',
        tel:'',
        sex_columns:['男','女'],
        currentDate:new Date()
      }
    },
     methods: {
      onClickLeft() {
        Toast('返回');
      },
      onClickRight() {
        Toast('按钮');
      },
      onConfirm(value) {
        this.value = value;
        this.showPicker = false;
      },
      //检查身份证号
      ID_check(){
        let zz=/^\d{18}$/;
        if(!zz.test(this.ID_Number)){
          this.$toast('不是正确的身份证号码')
        }
      },
      checkSex(value){
        this.sex=value
        this.showSex=false
      },
      checkTime(value){
        let day=this.moment(value).format('YYYY-MM-DD')
        this.time=day
        this.showTime=false
      }
    },
    watch: {
    value(newValue, oldValue) {
      if(newValue=='中国'){
        this.data='内地居民身份证'
      }else if(newValue=='中国香港'){
        this.data='香港居民身份证'
      }else if(newValue=='中国澳门'){
        this.data='澳门居民身份证'
      }else if(newValue=='中国台湾'){
        this.data='台湾居民身份证'
      }else{
        this.data='护照'
      }
    }
  },
  }
</script>

<style>
  div.register{background-color: gray;}
  .van-popup--center.van-popup--round {
    border-radius: 6px;
    width:215px;
    line-height: 30px;
    height: 30px;
    text-align: center;
}
span{
  font-size: 16px;
}
</style>